<template>
    <div class="container">
        <div class="title" style="margin-bottom:0;">{{info.title}}</div>
        <div class="media" v-if="info.haveImg">
            <img :src="info.imgUrl" alt="">
        </div>
        <div class="content" style="margin-bottom:0;">{{info.content}}</div>
        <div class="bottom-bar level is-mobile">
            <span class="level-left">
                <a class="button">
                    <span style="display:inline-flex;align-items:center;margin-right:6px;">
                        <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                            <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path>
                        </svg>
                    </span>赞同&nbsp;{{formatApproveCount}}
                </a>
                <a class="button" style="margin-left:8px;">
                    <span style="display:inline-flex;align-items:center;">
                        <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                            <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path>
                        </svg>
                    </span>
                </a>
            </span>
            <span class="level-right">
                <a class="button ic" style="">
                    <span style="display:inline-flex;align-items:center;margin-right:6px;">
                        <svg class="Zi Zi--Comment Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                            <path d="M10.241 19.313a.97.97 0 0 0-.77.2 7.908 7.908 0 0 1-3.772 1.482.409.409 0 0 1-.38-.637 5.825 5.825 0 0 0 1.11-2.237.605.605 0 0 0-.227-.59A7.935 7.935 0 0 1 3 11.25C3 6.7 7.03 3 12 3s9 3.7 9 8.25-4.373 9.108-10.759 8.063z" fill-rule="evenodd"></path>
                        </svg>
                    </span>
                    评论&nbsp;{{formatCommentCount}}
                </a>

                <a class="button ic" style="">
                    <span style="display:inline-flex;align-items:center;margin-right:6px;">
                        <svg class="Zi Zi--Star Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em">
                            <path d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z" fill-rule="evenodd"></path>
                        </svg>
                    </span>
                </a>

                  <a class="button ic" style="">
                    <span style="display:inline-flex;align-items:center;margin-right:6px;">
                      <svg class="Zi Zi--Dots Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill-rule="evenodd"></path></svg>
                    </span>
                </a>
            </span>

        </div>
    </div>
</template>

<script>
export default {
  name: "Item",
  props:["info"],
  computed:{
      formatApproveCount:function(){
          var count =  this.info.approveNum;
          if(count<1000){
            return count;
          }else if(count>=1000&&count<10000){
              return count/1000+"K";
          }
          else if(count>=10000&&count<100000){
              return count/1000+"W";
          }else{
              return count/1000+"W+";
          }
      },
      formatCommentCount:function(){
          var count =  this.info.commentNum;
          if(count<1000){
            return count;
          }else if(count>=1000&&count<10000){
              return count/1000+"K";
          }
          else if(count>=10000&&count<100000){
              return count/1000+"W";
          }else{
              return count/1000+"W+";
          }
      }
  }
};
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.container {
  border: 1px solid #eee;
  background: #fff;
  padding: 10px 20px;
}
.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
  text-align: -webkit-auto;
}
.content{
    margin-top: 9px;
    max-height: 50px;
    font-size: 17px;
    color: #1a1a1a;
    overflow: hidden;
}
.media img{
    width: 100%;
    border-radius: 5px;
    height: 155px;
    margin-top: 10px;
}
.bottom-bar {
  height: 52px;
  font-weight: 700;
}
.bottom-bar a {
  color: #0084ff;
  background: rgba(0, 132, 255, 0.1);
  border-color: transparent;
  border: 0px;
}
.bottom-bar .ic {
  background: transparent;
  font-size: 14px;
  color: #8590a6;
  margin-left: 8px;
  padding-left: 0;
  padding-right: 0;
}

</style>
